import styled from 'styled-components'
import search from 'assets/images/search.png'
import Border1px from '../style/Border1px'
const SearchContainer =styled.div`
    height:1.3rem;
    background:${(props)=>props.bg};
    padding:0 0.3rem;
    display:flex;
    justify-content:center;
    align-items:center;
`

const InputContainer= styled.div`
    display:flex; 
    flex:1;
    height:0.8rem;
    justify-content:center;
    align-items:center;
    border-radius:${(props)=>props.radius}rem;
    padding:0 0.1rem; 
    background:${(props)=>props.inputBg};
    i{
        width:.3rem;
        height:.3rem;

        background:url(${search});
        background-size:cover;
    }
    input{
        height:100%;
        width:4rem;
        border:none;
        background:${(props)=>props.inputBg};
        &::placeholder{
            color:#666;
           
        }
    }
    
`

const InputBorderContainer=Border1px(InputContainer)
export{
    SearchContainer,
    InputContainer,
    InputBorderContainer

}